<template>
  <div>
    <CloudUpload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :transform-file="transformFile"
    >
      <CloudButton> <CloudIcon type="upload" /> Upload </CloudButton>
    </CloudUpload>
  </div>
</template>

<script>

  export default {
    title: '6.上传前转换文件',
    subTitle: '使用 transformFile 转换上传的文件（例如添加水印）。',
    data () {
      return {
      }
    },
    methods: {
      transformFile (file) {
        return new Promise(resolve => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            const canvas = document.createElement('canvas');
            const img = document.createElement('img');
            img.src = reader.result;
            img.onload = () => {
              const ctx = canvas.getContext('2d');
              ctx.drawImage(img, 0, 0);
              ctx.fillStyle = 'red';
              ctx.textBaseline = 'middle';
              ctx.fillText('Ant Design', 20, 20);
              canvas.toBlob(resolve);
            };
          };
        });
      },
    }
  }
</script>

<style lang="scss">
</style>